<template>
    <div class="user-management">
        <h2>用户管理</h2>
        
        <!-- 角色筛选 -->
        <div class="filter-section">
            <el-radio-group v-model="currentRole" @change="handleRoleChange">
                <el-radio-button :label="null">全部</el-radio-button>
                <el-radio-button :label="0">学生</el-radio-button>
                <el-radio-button :label="1">教师</el-radio-button>
                <el-radio-button :label="2">管理员</el-radio-button>
            </el-radio-group>
        </div>

        <!-- 用户列表 -->
        <el-table :data="userList" style="width: 100%">
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column label="角色">
                <template #default="scope">
                    <el-tag :type="getRoleTagType(scope.row.role)">
                        {{ getRoleText(scope.row.role) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="scope">
                    <el-tag :type="scope.row.status ? 'success' : 'danger'">
                        {{ scope.row.status ? '正常' : '禁用' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                        :type="scope.row.status ? 'danger' : 'success'"
                        size="small"
                        @click="handleStatusChange(scope.row)"
                    >
                        {{ scope.row.status ? '禁用' : '启用' }}
                    </el-button>
                    <el-button
                        type="danger"
                        size="small"
                        @click="handleDelete(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { userService } from '@/api/user.js'

const userList = ref([])
const currentRole = ref(null)

// 获取用户列表
const getUserList = async (role = null) => {
    try {
        const response = await userService.getUsersByRole(role === null ? 'all' : role.toString())
        userList.value = response.data
    } catch (error) {
        ElMessage.error('获取用户列表失败')
    }
}

// 角色切换
const handleRoleChange = (role) => {
    getUserList(role)
}

// 获取角色标签类型
const getRoleTagType = (role) => {
    const types = {
        0: 'info',    // 学生
        1: 'success', // 教师
        2: 'warning'  // 管理员
    }
    return types[role] || 'info'
}

// 获取角色文本
const getRoleText = (role) => {
    const texts = {
        0: '学生',
        1: '教师',
        2: '管理员'
    }
    return texts[role] || '未知'
}

// 处理用户状态变更
const handleStatusChange = async (user) => {
    try {
        await ElMessageBox.confirm(
            `确定要${user.status ? '禁用' : '启用'}该用户吗？`,
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
        
        await userService.updateUserStatus({
            userId: user.id,
            status: user.status ? 0 : 1
        })
        ElMessage.success(`已${user.status ? '禁用' : '启用'}用户`)
        getUserList(currentRole.value)
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error('操作失败')
        }
    }
}

// 处理删除用户
const handleDelete = async (user) => {
    try {
        await ElMessageBox.confirm(
            '此操作将永久删除该用户，是否继续？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
        
        await userService.deleteUser(user.id)
        ElMessage.success('删除成功')
        getUserList(currentRole.value)
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error('删除失败')
        }
    }
}

onMounted(() => {
    getUserList()
})
</script>

<style scoped>
.user-management {
    padding: 20px;
}

.filter-section {
    margin-bottom: 20px;
}
</style> 